<template>
  <div class="loginContainer">
    <el-form
      class="loginForm"
      :model="loginForm"
      ref="loginForm"
      :rules="rules"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <el-form-item>
        <span class="loginTitle">教师开放图书室借阅系统</span>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input show-password v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="userType">
        <el-radio-group v-model="loginForm.userType">
          <el-radio :label="0">读者</el-radio>
          <el-radio :label="1">管理员</el-radio>
        </el-radio-group>
        <span style="font-weight: bold; color:orangered;float: right;margin-right: 15px;cursor: pointer;"
              @click="resetPassWordBtn"
        >忘记密码(管理员)</span>
        <span style="font-weight:bold;color: red;float: right;margin-right: 15px;cursor: pointer;" @click="registerBtn">无账号，读者注册</span>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-button type="primary" class="mybtn" @click="onSubmit">登录</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <!-- 注册弹框 -->
    <sys-dialog
      :title="dialog.title"
      :visible="dialog.visible"
      :height="dialog.height"
      :width="dialog.width"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="addModel"
          ref="addRefReader"
          :rules="registerRules"
          label-width="80px"
          size="small"
          style="margin-right: 30px"
        >
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item prop="learnNum" label="姓名">
                <el-input v-model="addModel.learnNum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item prop="phone" label="电话">
                <el-input v-model="addModel.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item prop="idCard" label="身份证">
                <el-input v-model="addModel.idCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item prop="className" label="班级">
                <el-input v-model="addModel.className"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item prop="username" label="读者证号">
                <el-input v-model="addModel.username"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item prop="password" label="密码">
                <el-input show-password v-model="addModel.password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item prop="confirmPassword" label="确认密码">
                <el-input show-password v-model="addModel.confirmPassword"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item prop="sex" label="性别">
                <el-radio-group v-model="addModel.sex">
                  <el-radio :label="'0'">男</el-radio>
                  <el-radio :label="'1'">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </sys-dialog>
    <!-- 重置密码弹框 -->
    <sys-dialog
      :title="resetDialog.title"
      :visible="resetDialog.visible"
      :height="resetDialog.height"
      :width="resetDialog.width"
      @onClose="onResetClose"
      @onConfirm="onResetConfirm"
    >
      <div slot="content">
        <el-form
          :model="addModel"
          ref="addRef"
          :rules="resetRules"
          label-width="80px"
          size="small"
          style="margin-right: 30px"
        >
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item prop="username" label="用户名">
                <el-input v-model="addModel.username"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item prop="phone" label="电话">
                <el-input v-model="addModel.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item prop="email" label="邮箱">
                <el-input v-model="addModel.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </sys-dialog>
  </div>
</template>
<script>
import { registerApi } from '@/api/reader'
import sysDialog from '@/components/dialog/SysDialog.vue'
import { validatePhone, validateIdCard, validateEmail } from '@/utils/validate'
import { setUserType } from '@/utils/auth'
import { resetPassWordApi } from '@/api/user'

export default {
  //注册弹框组件
  components: {
    sysDialog,
  },
  data () {
    return {
      registerRules: {
        learnNum: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        username: [{ required: true, message: '请填写读者证号', trigger: 'blur' }],
        idCard: [
          { required: true, message: '请填写身份证号', trigger: 'blur' }, { validator: validateIdCard, trigger: 'blur' }],
        phone: [{ required: true, message: '请填写电话', trigger: 'blur' }, { validator: validatePhone, trigger: 'blur' }],
        email: [{ required: true, message: '请填写邮箱', trigger: 'blur' }, { validator: validateEmail, trigger: 'blur' }],
        password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change ' }],
        confirmPassword: [
          { required: true, message: '请填写确认密码', trigger: 'blur' },
        ],
        className: [{ required: true, message: '请填写班级', trigger: 'blur' }],
      },
      //重置密码验证
      resetRules: {
        username: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
        idCard: [
          { required: true, message: '请填写身份证号', trigger: 'blur' }, { validator: validateIdCard, trigger: 'blur' }],
        phone: [{ required: true, message: '请填写电话', trigger: 'blur' }, { validator: validatePhone, trigger: 'blur' }],
        email: [{ required: true, message: '请填写邮箱', trigger: 'blur' }, { validator: validateEmail, trigger: 'blur' }],
      },
      //表单属性
      addModel: {
        readerId: '',
        learnNum: '',
        username: '',
        idCard: '',
        email: '',
        sex: '',
        phone: '',
        password: '',
        confirmPassword: '',
        type: '',
        className: '',
      },
      dialog: {
        title: '读者注册',
        visible: false,
        height: 200,
        width: 630,
      },
      resetDialog: {
        title: '重置密码(管理员)请验证您的信息',
        visible: false,
        height: 100,
        width: 630
      },
      //登录表单绑定数据源
      loginForm: {
        username: '',
        password: '',
        userType: '', //0：读者 1： 管理员
      },
      //表单验证规则
      rules: {
        username: [
          {
            trigger: 'change',
            required: true,
            message: '请输入用户名',
          },
        ],
        password: [
          {
            trigger: 'change',
            required: true,
            message: '请输入密码',
          },
        ],
        userType: [
          {
            trigger: 'change',
            required: true,
            message: '请选择用户类型',
          },
        ],
      },
    }
  },
  methods: {
    onConfirm () {
      if (this.addModel.password != this.addModel.confirmPassword) {
        this.$message.warning('两次密码不一致!')
        return
      }
      this.$refs.addRefReader.validate(async(valid) => {
        if (valid) {
          let res = await registerApi(this.addModel)
          if (res && res.code == 200) {
            this.$message.success(res.msg)
            this.dialog.visible = false
          }
        }
      })
    },
    onClose () {
      //清空表单
      this.$resetForm('addRefReader', this.addModel)
      this.dialog.visible = false
    },
    //读者注册按钮
    registerBtn () {
      this.dialog.visible = true
    },
    //重置密码按钮
    resetPassWordBtn () {
      this.resetDialog.visible = true
    },
    onResetClose () {
      //清空表单
      this.$resetForm('addRef', this.addModel)
      this.resetDialog.visible = false
    },
    //重置密码
    onResetConfirm () {
      this.$refs.addRef.validate(async(valid) => {
        if (valid) {
          let res = await resetPassWordApi(this.addModel)
          if (res && res.code == 200) {
            this.$message.success(res.msg)
            this.resetDialog.visible = false
          }
        }
      })
    },
    //登录提交事件
    onSubmit () {
      //表单验证
      this.$refs.loginForm.validate((valid) => {
        //验证通过才提交表单
        if (valid) {
          this.loading = true
          //设置用户类型
          setUserType(this.loginForm.userType)
          //调用store里面的login方法
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            //跳转路由
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
  },
}
</script>
<style scoped>
.loginContainer {
  height: 100%;
  background-image: url("../../assets/images/background.svg");
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 100% 100%;
}

.loginForm {
  height: 350px;
  width: 480px;
  background: #fff;
  padding: 35px 20px;
  border-radius: 10px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #409eff;
}

.loginContainer ::v-deep .el-form-item__content {
  margin-left: 0px !important;
}

.mybtn {
  width: 100%;
}
</style>
